<template>
    <div class="common-layout">
        <el-row>
            <el-container>
                <el-aside width="120px">
                    <Aside />
                </el-aside>
                <el-container style="display: block">
                    <el-row class="main-body">
                        <el-col :span="leftSpan">
                            <NoteList v-model:clickItem="chatContent" v-model:clickItemId="chatItemId" />
                        </el-col>
                        <el-col :span="rightSpan">
                            <Editor v-model:content="chatContent" v-model:action="action" v-model:chatItemId="chatItemId" />
                        </el-col>
                        <el-col :span="chatSpan">
                            <Chat v-model:chatContent="chatContent" :readOnly="true" :plugin="plugin" />
                        </el-col>
                    </el-row>
                </el-container>
            </el-container>
        </el-row>
    </div>
</template>
  
<script setup>
import { ref, provide } from "vue";
import Aside from '@/pages/layout/Aside.vue'
import Editor from "./components/Editor.vue";
import NoteList from "./components/NoteList.vue";
import Chat from "../plugin/components/Chat.vue";
import { getPlugin } from '@/api/plugin'

const chatContent = ref('')
const chatItemId = ref('')

const leftSpan = ref(6)
const rightSpan = ref(18)
const chatSpan = ref(0)
const action = ref('edit') //chat,edit


const plugin = ref({})
getPlugin(1).then((result) => {
    plugin.value = result
})

const setLayout = () => {
    if (action.value === 'edit') {
        leftSpan.value = 0
        rightSpan.value = 16
        chatSpan.value = 8
        action.value = 'chat'
    } else {
        leftSpan.value = 6
        rightSpan.value = 18
        chatSpan.value = 0
        action.value = 'edit'
    }
}
provide('setLayout', setLayout)

</script>
  
<style scoped>
.content-list {
    position: relative;
    flex-direction: column;
}

.left-button {
    position: absolute;
    right: -16px;
    z-index: 101;
    opacity: 0;
    cursor: pointer;
    width: 16px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    /* background: pink; */
}

.left-button:hover {
    opacity: 1;
}

.left-button>div {
    color: #333333;
    /* border-radius: 0 4px 4px 0; */
    border: solid 1px #e3e3e3;
    height: 40px;
    line-height: 40px;
    transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
    background: pink;
}

.el-container {
    padding: 0px !important;
}

.main-body {
    height: calc(100vh - 60px);
}

.demo-tabs {
    height: 100vh;
}

/deep/ .el-tabs__header {
    margin: 0;
}

/deep/ .el-tabs--card>.el-tabs__header .el-tabs__nav {
    border-radius: 0;
}
</style>